<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>
<body>
    您好，<span id="user"></span>
    <div>
        <input type="text" id="name" placeholder="请输入日程">
        <input type="text" id="description" placeholder="请输入描述">
        <input type="date" id="date" placeholder="请输入截止日期">
        <button id="btn" onclick="save()">提交</button>
    </div>

    <div id="schedule">

    </div>

<script>
    fetch('/info').then(res => res.json())
        .then(res => {
            console.log(res)
            document.getElementById('user').innerText = res.name
        })
        .catch(e => {
            console.error(e)
            location.href = '/login.html'
        })


    function loadSchedule() {
        fetch('/schedule/info').then(res => res.json())
            .then(res => {
                const scheduleDiv = document.getElementById("schedule")
                scheduleDiv.innerHTML = ''
                res.forEach(item => {
                    let column = ''
                    if (item.between === 0) {
                        column =  `<div style="flex: 1">今天过期</div>`
                    } else if(item.between > 0) {
                        column = `<div style="flex: 1">还剩${item.between}天过期</div>`
                    } else {
                        column = `<div style="flex: 1">已过期${Math.abs(item.between)}天</div>`
                    }


                    scheduleDiv.innerHTML += `
                <div style="padding-bottom: 5px; color: #666; border-bottom: 1px solid #ccc; display: flex; margin-top: 10px">

                    <div style="flex: 1">${item.name}</div>
                    <div style="flex: 1">${item.description}</div>
                    <div style="flex: 1">${item.date}</div>`

                    + column

                    + `<div style="flex: 1"><button onclick="del(${item.id})">删除</button></div>
                </div>
                `
                })
            })
            .catch(e => {
                console.error(e)
                location.href = '/login.html'
            })
    }

    loadSchedule()  // 页面加载的时候触发函数请求数据

    function del(id) {
        fetch('/schedule/' + id, {
            method: 'DELETE'
        }).then(res => {
            if (res.status/200 < 2) {  // status == 200表示成功
                alert("删除成功")
                loadSchedule()
            }else {
                alert("删除失败")
            }
        })
    }

    function save() {
        const nameInput = document.getElementById('name')
        const descriptionInput = document.getElementById('description')
        const dateInput = document.getElementById('date')
        const name = nameInput.value
        const description = descriptionInput.value
        const date = dateInput.value

        fetch('/schedule/save', {
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            body: JSON.stringify({name: name, description: description, date: date})
        }).then(res => {
            if (res.status/200 < 2) {  //  200 201  202  301  302 400
                alert("提交成功")

                // 清空数据
                nameInput.value = ''
                descriptionInput.value = ''
                dateInput.value = ''

                loadSchedule()
            } else {
                alert("提交失败")
            }
        })
    }
</script>
</body>
</html>